<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>First-of-type vs First-child</title>
    <link rel="stylesheet" href="styles.css">

    <style>
        /* 选择第一个 <p> 元素（父元素的第一个子元素且是 <p> 类型） */
        p:first-child {
            color: blue;
            font-weight: bold;
        }

        /* 选择每个父元素中的第一个 <span> 类型的元素 */
        span:first-of-type {
            background-color: yellow;
            font-style: italic;
        }
    </style>
</head>

<body>
    <div>
        <p>这是第一个div中的p元素。</p>
        <span>这是第一个div中的span元素。</span>
    </div>
    <div>
        <span>这是另一个div中的第一个span元素。</span>
        <p>这是另一个div中的p元素。</p>
    </div>
</body>

</html>